<template>
  <view class="activity">
    <scroll-view scroll-y class="scroll_view">
      <view>
        <view class="swiper-content">
          <!-- 健康评分 -->
          <view class="score-box">
            <view class="score-title">
              活动评分
              <uni-icons
                type="info"
                class="info-icon"
                size="20"
                color="#666666"
              ></uni-icons>
            </view>
            <view class="score-value">{{ score }}</view>
            <view class="score-desc">
              <view class="score-desc-item">
                <view class="score-line line-left"></view>
                <view class="score-block"></view>
              </view>
              <view class="score-desc-text">超过了74%的用户</view>
              <view class="score-desc-item">
                <view class="score-block"></view>
                <view class="score-line line-right"></view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 健康建议 -->
      <view class="advice-box">
        <view class="advice-title">智慧健康建议</view>
        <view class="advice-content">
          提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
        </view>
        <view class="ai-btn">
          <AiPointReport></AiPointReport>
        </view>
      </view>

      <view
        style="
          margin-top: 15px;
          margin-bottom: 15px;
          font-size: 16px;
          color: #666666;
        "
        ><text>活动数据</text
        ><text style="float: right">{{ chooseDate }}</text></view
      >
      <!-- 卡路里 -->
      <view class="card calories noDay">
        <view class="head">
          <!--				<image class="w-92rpx" src="@/static/ring/chart/Calories.png" mode="widthFix"></image>-->
          <view class="title">
            <view class="title-text">
              <view class="title-content"> 卡路里 </view>
            </view>
            <uni-icons
              type="info"
              class="info-icon"
              size="20"
              color="#666666"
            ></uni-icons>
          </view>
          <!--				<uni-icons type="info-filled" class="ml-10rpx" size="20" color="#666666" @click="openTip('calories')"></uni-icons>-->
        </view>
        <view class="value">
          <view class="value-text">{{ calories.averageNum }}</view>
          <view class="value-label">千卡</view>
        </view>
        <view class="card-time">00:00-7:00</view>
        <view class="chart">
          <!-- <view v-if="caloriesNotDataOrLoading" class="noData_loading_mask">
					{{ !calories.loading ? "暂无数据" : "加载中..." }}
				</view> -->
          <l-echart ref="calChartRef"></l-echart>
        </view>
      </view>
      <!--		<view class="info" v-if="calories.healthText && calories.averageNum">
			<view class="info-content">
				<text>{{ calories.healthText }}</text>
			</view>
		</view>-->

      <!-- 步数 -->
      <view class="card steps noDay">
        <view class="head">
          <!--				<image class="w-92rpx" src="@/static/ring/chart/step.png" mode="widthFix"></image>-->
          <view class="title">
            <view class="title-text">
              <view class="title-content"> 距离 </view>
              <TagState></TagState>
            </view>
            <uni-icons
              type="info"
              class="info-icon"
              size="20"
              color="#666666"
            ></uni-icons>
          </view>
          <!--				<uni-icons type="info-filled" class="ml-10rpx" size="20" color="#666666" @click="openTip('steps')"></uni-icons>-->
        </view>
        <view class="value">
          <view class="value-text">{{ calories.averageNum }}</view>
          <view class="value-label">米</view>
        </view>
        <view class="card-time">00:00-7:00</view>
        <view class="chart">
          <!-- <view v-if="stepsNotDataOrLoading" class="noData_loading_mask">
            {{ !steps.loading ? "暂无数据" : "加载中..." }}
          </view> -->
          <l-echart ref="stepChartRef"></l-echart>
        </view>
      </view>
      <!--		<view class="info" v-if="steps.healthText && steps.averageNum">
			<view class="info-content">
				<text>{{ steps.healthText }}</text>
			</view>
		</view>-->

      <!-- 距离 -->
      <view class="card distance noDay" style="margin-bottom: 60px">
        <view class="head">
          <!--				<image class="w-92rpx" src="@/static/ring/chart/distance.png" mode="widthFix"></image>-->
          <view class="title">
            <view class="title-text">
              <view class="title-content"> 步数 </view>
              <TagState></TagState>
            </view>
            <uni-icons
              type="info"
              class="info-icon"
              size="20"
              color="#666666"
            ></uni-icons>
          </view>
          <!--				<uni-icons type="info-filled" class="ml-10rpx" size="20" color="#666666" @click="openTip('distance')"></uni-icons>-->
        </view>
        <!-- <view class="value">{{ distance.averageNum }}<text>km</text></view> -->
        <view class="value">
          <view class="value-text">{{ calories.averageNum }}</view>
          <view class="value-label">步</view>
        </view>
        <view class="card-time">00:00-7:00</view>
        <view class="chart">
          <!-- <view v-if="distanceNotDataOrLoading" class="noData_loading_mask">
            {{ !distance.loading ? "暂无数据" : "加载中..." }}
          </view> -->
          <l-echart ref="disChartRef"></l-echart>
        </view>
      </view>
      <!--		<view class="info" v-if="distance.healthText && distance.averageNum">
			<view class="info-content">
				<text>{{ distance.healthText }}</text>
			</view>
		</view>-->
    </scroll-view>
  </view>
</template>
<script>
import dayjs from "dayjs";
import * as echarts from "echarts";

import cImage from "@/static/ring/chart/Calories.png";
import sImage from "@/static/ring/chart/step.png";
import dImage from "@/static/ring/chart/distance.png";
import AiPointReport from "@/pages/ring/components/AiPointReport.vue";


import {
  queryMyStepInfoByDay,
  queryMyStepInfoByWeek,
  queryMyStepInfoByMonth,
} from "@/api/ring/chart.js";

const tip_zh = `
卡路里消耗显示用户在一天内通过活动燃烧的能量。

该指标结合用户的体重、身高、年龄和活动类型计算，帮助用户了解每日能量消耗情况。

通过监测卡路里消耗，用户可以更好地管理体重和健康状况，确保能量平衡。

注：本设备提供的检测数据仅用于日常健康管理辅助参考，不可替代专业医疗诊断。
`;

const tip_zh2 = `
步数记录用户每日的行走步数，通过内置传感器精确计算。

步数不仅是衡量身体活动量的简单指标，还能帮助用户设定并实现健康目标。

日常行走有助于提高心血管健康、增强肌肉力量和促进新陈代谢。

*年轻人：最佳步数范围在8000-10000步之间。

*60岁以上老年人：最佳步数范围在6000-8000步之间。

达到这些步数目标，有助于维持和改善整体健康状况。
`;

const tip_zh3 = `
行走距离通过步数和步幅计算得出，表示用户每日行走的总距离。

该指标有助于用户了解行走或跑步的总里程，定期行走一定距离对心脏健康、骨骼强度和整体体能都有显著益处。
`;

const _options = (lineColor) => {
  return {
    color: ["#E5404F"],
    grid: {
      left: "1%",
      right: "15",
      top: "10",
      bottom: "2",
      containLabel: true,
    },
    xAxis: [
      {
        show: true,
        type: "category",
        boundaryGap: false,
        axisTick: {
          show: false,
        },
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            type: [5, 10],
            color: lineColor ? lineColor : "rgba(141, 141, 141, 0.3)",
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "rgba(141, 141, 141, 0.3)",
          },
        },
        axisLabel: {
          show: false,
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
};

const _calOptions = _options("#f1ac68");
const _distanceOptions = _options('#85cb98');
const _stepOptions = _options('#ffd747');

export default {
  props: {
    selectDateInfo: Object,
  },
  components: {
    AiPointReport,
  },
  data() {
    return {
      score: 76,
      chooseDate: "",
      selectType: "day",
      calories: {
        type: "calories",
        showTip: false,
        tipText: tip_zh,
        max: 0,
        min: 0,
        averageNum: 0,
        chartData: [],
        chartRef: null,
        chart: null,
        healthText: "",
        healthModelValue: 0,
        loading: false,
        empty: false,
      },
      steps: {
        type: "steps",
        showTip2: false,
        tipText2: tip_zh2,
        max: 0,
        min: 0,
        averageNum: 0,
        chartData: [],
        chartRef: null,
        chart: null,
        healthText: "",
        healthModelValue: 0,
        loading: false,
        empty: false,
      },
      distance: {
        type: "distance",
        showTip2: false,
        tipText2: tip_zh3,
        max: 0,
        min: 0,
        averageNum: 0,
        chartData: [],
        chartRef: null,
        chart: null,
        healthText: "",
        healthModelValue: 0,
        loading: false,
        empty: false,
      },
      showTip: false,
      tip: tip_zh,
      icon: "@/static/ring/chart/Calories.png",
      title: "卡路里",
    };
  },

  computed: {
    caloriesNotDataOrLoading() {
      const data = this.calories.chartData;
      return !data || !Array.isArray(data) || !data.length;
    },
    stepsNotDataOrLoading() {
      const data = this.steps.chartData;
      return !data || !Array.isArray(data) || !data.length;
    },
    distanceNotDataOrLoading() {
      const data = this.distance.chartData;
      console.log("distance data", data);
      return !data || !Array.isArray(data) || !data.length;
    },
    optionsCalDay() {
      return {
        ..._calOptions,
        series: [
          {
            name: "Line 1",
            type: "bar",
            smooth: false,
            lineStyle: {
              width: 1.5,
              color: "#F1AC68",
            },
            showSymbol: true,
            symbolSize: 1.5,
            symbol: "circle",
            itemStyle: {
              color: "#F1AC68",
            },
            areaStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#F1AC68",
                },
                {
                  offset: 1,
                  color: "rgba(191, 53, 65, 0)",
                },
              ]),
            },
            data: this.calories.chartData,
          },
        ],
      };
    },
    optionsCalOther() {
      return {
        ..._calOptions,
        series: [
          {
            name: "Line 1",
            type: "line",
            smooth: false,
            lineStyle: {
              width: 1.5,
              color: "#F1AC68",
            },
            areaStyle: {
              opacity: 0,
            },
            showSymbol: true,
            symbol: "circle",
            data: this.calories.chartData,
          },
        ],
      };
    },
    optionsStepDay() {
      return {
        ..._stepOptions,
        series: [
          {
            name: "步数",
            type: "bar",
            smooth: false,
            lineStyle: {
              width: 1.5,
              color: "#FFD747",
            },
            showSymbol: true,
            symbolSize: 1.5,
            symbol: "circle",
            itemStyle: {
              color: "#FFD747",
            },
            areaStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FFD747",
                },
                {
                  offset: 1,
                  color: "rgba(191, 53, 65, 0)",
                },
              ]),
            },
            data: this.steps.chartData,
          },
        ],
      };
    },
    optionsStepOther() {
      return {
        ..._stepOptions,
        series: [
          {
            name: "Line 1",
            type: "bar",
            smooth: false,
            lineStyle: {
              width: 1.5,
              color: "#FFD747",
            },
            areaStyle: {
              opacity: 0,
            },
            showSymbol: true,
            symbol: "circle",
            data: this.steps.chartData,
          },
        ],
      };
    },
    optionsDisDay() {
      return {
        ..._distanceOptions,
        series: [
          {
            name: "距离",
            type: "bar",
            smooth: false,
            lineStyle: {
              width: 1.5,
              color: "#85CB98",
            },
            showSymbol: true,
            symbolSize: 1.5,
            symbol: "circle",
            itemStyle: {
              color: "#85CB98",
            },
            areaStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#85CB98",
                },
                {
                  offset: 1,
                  color: "rgba(191, 53, 65, 0)",
                },
              ]),
            },
            data: this.distance.chartData,
          },
        ],
      };
    },
    optionsDisOther() {
      return {
        ..._distanceOptions,
        series: [
          {
            name: "距离",
            type: "bar",
            smooth: false,
            lineStyle: {
              width: 1.5,
              color: "#85CB98",
            },
            areaStyle: {
              opacity: 0,
            },
            showSymbol: true,
            symbol: "circle",
            data: this.distance.chartData,
          },
        ],
      };
    },
  },

  watch: {
    selectDateInfo: {
      handler(nv) {
        const param = {
          type: "day",
          startTime: nv.fulldate,
        };
        this.chooseDate = dayjs(nv.fulldate).format("MM月DD日");
        this.allOnChange(param);
      },
      deep: true,
    },

    optionsCalDay: {
      handler(nv) {
        console.log("optionsCalDay");

        if (this.selectType === "day") {
          if (this.calories.chart) {
            setTimeout(() => {
              this.calories.chart.setOption(nv);
            }, 0);
          }
        }
      },
      deep: true,
    },
    optionsCalOther: {
      handler(nv) {
        if (this.selectType !== "day") {
          setTimeout(() => {
            this.calories.chart.setOption(nv);
          }, 0);
        }
      },
      deep: true,
    },
    optionsStepDay: {
      handler(nv) {
        console.log("optionsStepDay");

        if (this.selectType === "day") {
          if (this.steps.chart) {
            this.steps.chart.setOption(nv);
          }
        }
      },
      deep: true,
    },
    optionsStepOther: {
      handler(nv) {
        if (this.selectType !== "day") {
          if (this.steps.chart) {
            setTimeout(() => {
              this.steps.chart.setOption(nv);
            }, 500);
          }
        }
      },
      deep: true,
    },

    optionsDisDay: {
      handler(nv) {
        console.log("optionsDisDay");

        if (this.selectType === "day") {
          if (this.distance.chart) {
            setTimeout(() => {
              this.distance.chart.setOption(nv);
            }, 1500);
          }
        }
      },
      deep: true,
    },
    optionsDisOther: {
      handler(nv) {
        if (this.selectType !== "day") {
          if (this.distance.chart) {
            setTimeout(() => {
              this.distance.chart.setOption(nv);
            }, 1500);
          }
        }
      },
      deep: true,
    },
  },
  async mounted() {
    // 卡路里
    if (!this.calories.chartRef) {
      this.calories.chartRef = this.$refs.calChartRef;
    }
    if (this.calories.chartRef) {
      this.calories.chart = await this.calories.chartRef.init(echarts);
    }

    // 步数
    if (!this.steps.chartRef) {
      this.steps.chartRef = this.$refs.stepChartRef;
    }
    if (this.steps.chartRef) {
      this.steps.chart = await this.steps.chartRef.init(echarts);
    }

    // 距离
    if (!this.distance.chartRef) {
      this.distance.chartRef = this.$refs.disChartRef;
    }
    if (this.distance.chartRef) {
      this.distance.chart = await this.distance.chartRef.init(echarts);
    }
    console.log("selectDateInfo", this.selectDateInfo);
    const currentDate = dayjs().format("YYYY-MM-DD");
    this.chooseDate = dayjs(currentDate).format("MM月DD日");
    const param = {
      type: "day",
      startTime: currentDate,
    };
    await this.allOnChange(param);
  },

  methods: {
    async allOnChange(data) {
      this.calories.chart.setOption({
        ..._calOptions,
        series: [
          {
            name: "Line 1",
            type: "bar",
            barWidth: 12,
            itemStyle: {
              color: "#F1AC68",
              borderRadius: [10, 10, 0, 0],
            },
            data: [12, 31, 321, 123, 123, 421, 123],
          },
        ],
      });
			this.distance.chart.setOption({
        ..._distanceOptions,
        series: [
          {
            name: "Line 1",
            type: "bar",
            barWidth: 12,
            itemStyle: {
              color: "#85cb98",
              borderRadius: [10, 10, 0, 0],
            },
            data: [12, 31, 321, 123, 123, 421, 123],
          },
        ],
      });
			this.steps.chart.setOption({
        ..._stepOptions,
        series: [
          {
            name: "Line 1",
            type: "bar",
            barWidth: 12,
            itemStyle: {
              color: "#ffd747",
              borderRadius: [10, 10, 0, 0],
            },
            data: [12, 31, 321, 123, 123, 421, 123],
          },
        ],
      });
      return;

      console.log("allOnChange", data);

      const { type, startTime, endTime } = data;
      this.calories.max = 0;
      this.calories.min = 0;
      this.calories.averageNum = 0;
      this.calories.healthText = "";
      this.calories.healthModelValue = 0;
      this.calories.chartData = [];
      this.calories.loading = true;
      this.resetData();

      const offsetMinutes = new Date().getTimezoneOffset();

      const params =
        type == "day"
          ? { dateStr: startTime, offsetMinutes }
          : type === "week"
          ? { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes }
          : { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes };
      console.log("params", params);

      const requestMethod =
        type == "day"
          ? queryMyStepInfoByDay
          : type == "week"
          ? queryMyStepInfoByWeek
          : queryMyStepInfoByMonth;

      try {
        const { data } = await requestMethod(params);
        console.log("activity data", data);

        if (!data) {
          this.resetData();
          return;
        }

        const dealWith =
          type == "day" ? this.dataGetFullByDay : this.dataGetFullByOther;

        // 卡路里
        setTimeout(() => {
          this.calories.loading = false;
          this.calories.averageNum = data.calSum
            ? Number(data.calSum).toFixed(2)
            : 0;
          this.calories.healthText = data?.calModel?.config?.modelZh;
          this.calories.healthModelValue = parseInt(data?.calModel?.value || 0);
          if (this.calories.chart) {
            console.log("清理 calories");
            this.calories.chart.clear();
          }
          if (data.calRates) {
            dealWith("calories", data.calRates || []);
          }
        }, 500);

        // 步数
        setTimeout(() => {
          this.steps.loading = false;
          this.steps.averageNum = parseInt(data.sum || 0);
          this.steps.healthText = data?.stepModel?.config?.modelZh;
          this.steps.healthModelValue = parseInt(data?.stepModel?.value || 0);
          if (this.steps.chart) {
            console.log("清理 steps");
            this.steps.chart.clear();
          }
          if (data.rates) {
            dealWith("steps", data.rates || []);
          }
        }, 1000);

        // 距离
        setTimeout(() => {
          this.distance.loading = false;
          this.distance.averageNum = data.distanceSum
            ? Number(data.distanceSum).toFixed(2)
            : 0;
          this.distance.healthText = data?.disModel?.config?.modelZh;
          this.distance.healthModelValue = parseInt(data?.disModel?.value || 0);
          if (this.distance.chart) {
            console.log("清理 distance");
            this.distance.chart.clear();
          }
          if (data.distanceRates) {
            console.log("distanceRates", data.distanceRates);
            dealWith("distance", data.distanceRates || []);
          }
        }, 1500);
      } catch (error) {
        console.log("allOnChange error", error);
        this.resetData();
      }
    },

    async resetData() {
      this.calories.chartData = [];
      this.calories.averageNum = 0;
      this.steps.chartData = [];
      this.steps.averageNum = 0;
      this.distance.chartData = [];
      this.distance.averageNum = 0;
    },

    dataGetFullByDay(type, rates) {
      let res = [];
      // if (rates.every((item) => item.value < 1)) return;
      for (let i = 0; i < 24; i++) {
        const has = rates.findIndex((item) => Number(item.time) === i);
        if (has != -1) {
          res.push([i.toString() + ":00", rates[i].value || null]);
        } else {
          res.push([i.toString() + ":00", null]);
        }
      }
      res.sort((a, b) => Number(a[0]) - Number(b[0]));

      this[type].chartData = res;
      console.log(type, "res", this[type].type, this[type].chartData);
    },

    dataGetFullByOther(type, data) {
      const cycleCount = this.selectType == "week" ? 7 : data.length;
      let res = [];
      if (data.every((item) => item.value < 1)) return (chartCData.value = []);
      for (let i = 0; i < cycleCount; i++) {
        res.push([dayjs(data[i].date).format("MM.DD"), data[i].value || null]);
      }
      this[type].chartData = res;
    },

    openTip(type) {
      const tips = {
        tip: tip_zh,
        icon: cImage,
        title: "卡路里",
      };
      switch (type) {
        case "calories":
          tips.tip = tip_zh;
          tips.icon = cImage;
          tips.title = "卡路里";
          break;
        case "steps":
          tips.tip = tip_zh2;
          tips.icon = sImage;
          tips.title = "步数";
          break;
        case "distance":
          tips.tip = tip_zh3;
          tips.icon = dImage;
          tips.title = "距离";
          break;

        default:
          tips.tip = tip_zh;
          tips.icon = cImage;
          tips.title = "卡路里";
          break;
      }

      this.$emit("tips", tips);
    },
  },
};
</script>
<style lang="scss" scoped>
.activity {
  width: 100%;
  height: 100%;

  .scroll_view {
    width: 100%;
    // height: calc(100vh - var(--status-bar-height) - 56rpx);
    height: calc(100% - 0rpx);
  }

  .w-92rpx {
    width: 92rpx;
  }

  .w-60rpx {
    width: 60rpx;
  }

  .w-70rpx {
    width: 70rpx;
  }

  .w-40rpx {
    width: 40rpx;
  }

  .w-30rpx {
    width: 30rpx;
  }

  .mr-8rpx {
    margin-right: 8rpx;
  }

  .text-#AFAFAF {
    color: #afafaf;
  }

  .card {
    width: 100%;

    background-color: rgba($color: white, $alpha: 0.5);
    backdrop-filter: blur(20rpx);
    border-radius: 8px;
    height: 630rpx;

    padding: 40rpx;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .head {
      width: 100%;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .title {
        width: 100%;
        font-size: 32rpx;
        font-weight: 500;
        text-align: left;
        //margin-left: 6cap;
        margin-right: 12rpx;
        display: flex;
        justify-content: space-between;
      }
    }
    .value {
      display: flex;
      align-items: flex-end;
      .value-text {
        font-weight: 500;
        font-size: 30px;
      }
      .value-label {
        font-size: 14px;
        color: rgba(153, 153, 153, 1);
        margin-bottom: 5px;
      }
    }
    .chart {
      width: 100%;
      height: 400rpx;
      position: relative;

      .noData_loading_mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #e3f1fb;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: 150px;
        font-size: 28rpx;
        color: rgba(45, 153, 255, 1);
      }
      // background-color: #e5404f;
    }

    .range {
      display: flex;
      padding: 20rpx 52rpx 0 40rpx;
      font-weight: 500;

      .des {
        flex: 1;
        color: black;
        font-size: 32rpx;

        .desTop {
          display: flex;
          align-items: center;
          margin-bottom: 4rpx;
          white-space: nowrap;

          .titleTime {
            font-size: 28rpx;
            color: black;
            margin-left: 20rpx;
          }

          .dot {
            background: #e5404f;
            border-radius: 50%;
            width: 10rpx;
            height: 10rpx;
          }
        }

        .value {
          padding-left: 30rpx;

          .unit {
            font-size: 24rpx;
            margin-left: 8rpx;
          }
        }
      }
    }

    & + .card {
      margin-top: 40rpx;
      // height: 730rpx;
    }

    // &.noDay.calories {
    // 	height: 630rpx;
    // }

    // &.noDay.steps {
    // 	height: 630rpx;
    // }

    // &.noDay.distance {
    //     height: 630rpx;
    // }
  }

  .info {
    color: black;
    padding: 40rpx;

    .info-content {
      font-family: PingFang SC;
      font-size: 28rpx;
      font-weight: 300;
      line-height: 40rpx;
      text-align: left;
    }

    margin-bottom: 40rpx;
  }
}
.score-box {
  margin-top: 38rpx;
  text-align: center;

  .score-title {
    font-size: 32rpx;
    color: #999;
    margin-bottom: 8rpx;
  }

  .score-value {
    font-size: 128rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 42rpx;
  }

  .score-desc {
    font-size: 28rpx;
    color: #666;
  }
}

.advice-box {
  .advice-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #5667f8;
    margin-bottom: 16rpx;
  }

  .advice-content {
    font-size: 24rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 24rpx;
  }

  .ai-btn {
    display: flex;
    align-items: center;
    gap: 8rpx;
    font-size: 24rpx;
    color: #2d99ff;
  }
}
.info-icon {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.2) !important;
}

.score-desc {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  .score-desc-item {
    display: flex;
    align-items: center;
    .score-block {
      width: 5px;
      height: 5px;
      background: rgba(153, 153, 153, 1);
      border-radius: 1px;
    }
    .score-line {
      width: 60px;
      height: 2px;
    }
    .line-left {
      background: linear-gradient(
        90deg,
        rgba(153, 153, 153, 0) 0%,
        rgba(153, 153, 153, 1) 100%
      );
    }
    .line-right {
      background: linear-gradient(
        90deg,
        rgba(153, 153, 153, 1) 0%,
        rgba(153, 153, 153, 0) 100%
      );
    }
  }
  .score-desc-text {
    margin: 0 10px;
  }
}

.title-text {
  display: flex;
  align-items: center;
}
.title-content {
  margin-right: 8px;
}
.card-time {
  font-size: 14px;
  font-weight: 500;
	color: rgba(153, 153, 153, 1);
}
</style>
